<template>
    <div class="box">
        <div class="left-box">
            <div class="particulars">
                <div class="classname" >标题：</div>
                <div style="font-weight: bold;">{{ruleForm.title}}</div>
            </div>
            <div class="particulars">
                <div class="classname">关键字：</div>
                <div>{{ruleForm.keywords}}</div>
            </div>
            <div class="particulars">
                <div class="classname">作者：</div>
                <div>{{ruleForm.author}}</div>
            </div>
            <div class="particulars">
                <div class="classname">介绍：</div>
                <div>{{ruleForm.desc}}</div>
            </div>
            <div class="particulars">
                <div class="classname">正文:</div>
                <div>{{ruleForm.content}}</div>
            </div>
        </div>
     
    </div>
</template>

<script setup lang="ts">
import { ref , reactive,onBeforeMount,toRefs,onMounted} from 'vue';
import { onenews } from '../../api/admin3';
// 路由接收参数
import {useRoute} from 'vue-router';
const route = useRoute();
// 接收路由传入的参数
let routeMsg = reactive<any>('');
// console.log(route.query.news_id)
if(route.query.news_id){      
    routeMsg = route.query.news_id ;
    console.log(routeMsg ,'sssssssssss')
}
const ruleForm=reactive<any>([])
const getonelist=async()=>{
    const res:any=await onenews({id:routeMsg})
    console.log(res,'单挑')
    if(res.code==10000){
        Object.assign(ruleForm, res.data); 
        
    }
}
onMounted(()=>{
    getonelist()
})
</script>

<style scoped lang="less">
.box{
    width: 700px;
    height: 100%;
    display: flex;
    .left-box{
        flex: 1;
        height: 100%;
        // background-color: darkblue;
        .particulars{
            width: 100%;
            height: 62px;
            // background-color: rebeccapurple;
            display: flex;
            div{
                flex: 1;
                display: flex;
                font-size: 14px;
                align-items: center;
                padding-right: 10px;
            }
            .classname{
                flex-direction: row-reverse;

            }
        }
    }
    .right-box{
        flex: 1;
        height: 100%;
        // background-color: forestgreen;
        .rightbox{
            width: 100%;
            height: 168px;
            // background-color: rebeccapurple;
            display: flex;
            div{
                flex: 1;
                font-size: 14px;
            }
            .classname{
                display: flex;
                flex-direction: row-reverse;
                padding-top: 30px;
            }
            img{
               
                width: 90px;
                height: 90px;
                margin-left: 20px;
                margin-top: 40px;
            }
        }
    }
}
</style>